<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天亮云课堂---------</title>
    <!-- 设置网页图标 -->
    <link rel="icon" href="./image/favicon.ico">
    </link>
    <!-- 引入jquery -->
    <script src="./js/jquery-3.7.1.js"></script>
    <!-- bootstrap -->
    <script src="./js/bootstrap.js"></script>
    <!-- echarts 图标 -->
    <script src="./js/echarts.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/bootstrap.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">

    <!-- 轮播图 -->
    <link rel="stylesheet" href="./plugins/swiper-8.4.7/swiper/swiper-bundle.css">
    <script src="./plugins/swiper-8.4.7/swiper/swiper-bundle.js"></script>

    <!-- 自定义js和css -->

    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <!-- 网页总体盒子 -->
    <div id="app">
        <!-- 顶部容器 -->
        <div class="top-container">
            <!-- 顶部main -->
            <div class="top-main">
                <img src="./image/logo-text.321d0dc2.png" alt="">
            </div>
            <!-- 顶部导航栏 -->
            <div>
                <div class="general-container top-nav-container">
                    <!-- 导航栏 -->
                    <div class="top-nav">
                        <div class="course-list">
                            <div class="course-item">
                                <a href="">宇哥带你学Java</a>
                            </div>
                            <div class="course-item">
                                <a href="">学长面对面</a>

                            </div>
                        </div>

                        <ul>
                            <li><a href="#">首页</a></li>
                            <li id="course-classify">
                                <a href="#">课程分类</a>
                            </li>
                            <li><a href="#">教学管理云平台</a></li>
                        </ul>
                    </div>
                    <div class="spacer"></div>
                    <!-- 搜索框 -->
                    <div class="search-box">
                        <input type="text" placeholder="搜索课程~">
                        <span class="search-box-button">
                            <img src="./image/icons/search.svg" alt="">
                        </span>
                    </div>
                    <!-- 登录 -->
                    <div class="login-container">
                        <div class="chart-box">
                            <img src="./image/chart.png" alt="">
                        </div>
                        <div class="login-box">
                            登录/注册
                        </div>
                        <div class="open-mind">
                            开通VIP免费观看全站视频
                        </div>
                    </div>
                    <div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 顶部被滚动隐藏后显示的导航栏 -->
        <div class="nav-scroll">
            <div class="nav-container">
                <div class="nav-left">
                    <img src="./image/main-logo.png" alt="">
                    <div class="nav-box">
                        <a href="">首页</a>
                        <a href="" id="course-classify-scroll">课程分类</a>
                        <a href=""> 教学管理云平台</a>
                        <div class="course-list-scroll">
                            <div class="course-item">
                                <a href="">宇哥带你学Java</a>
                            </div>
                            <div class="course-item">
                                <a href="">学长面对面</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="nav-right">
                    <div class="search-box">
                        <input type="text" placeholder="搜索课程~">
                        <span class="search-box-button">
                            <img src="./image/search-logo.png" alt="">
                        </span>
                    </div>
                    <div class="chart">
                        <img src="./image/chart.png" alt="">
                    </div>
                    <div class="login-box">
                        登录/注册
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体容器  -->
        <div class="main-container">

            <!-- 轮播图 -->
            <div class="swiper-container">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./image/banner-1.png" alt=""></img>
                        </div>
                        <div class="swiper-slide">
                            <img src="./image/banner-2.jpg" alt=""></img>
                        </div>
                        <div class="swiper-slide">
                            <img src="./image/banner-3.jpg" alt=""></img>
                        </div>
                        <div class="swiper-slide">
                            <img src="./image/banner-4.png" alt=""></img>
                        </div>
                        <div class="swiper-slide">
                            <img src="./image/banner-5.png" alt=""></img>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>

            </div>

            <!-- vip盒子 -->
            <div class="vip-box">
                <img src="./image/diamond.png" alt="">
                <span>仅需198即可观看所有付费课程</span>
                <div>开通VIP </div>
            </div>

            <!-- 直播课 -->
            <div class="course-live-online-container">
                <!-- 左侧 -->
                <div class="online-left">
                    <!-- 标题行 -->
                    <div class="online-title-line">
                        <!-- 标题 -->
                        <div class="title-box">
                            <img src="./image/tv.png" alt="">
                            <div>直播课程</div>
                            <div>互联网大佬在线直播</div>
                        </div>
                        <!-- 切换 -->
                        <div class="change-box">
                            <img src="./image/last-btn.png" alt="">
                            <img src="./image/next-btn.png" alt="">

                        </div>
                    </div>
                    <div class="online-left-main container-fluid">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="live-content-box">
                                    <div class="img-container">
                                        <img src="./image/live-1.png" alt="">
                                    </div>
                                    <div class="live-title"> 求职技巧之重难点问题剖析与解决 </div>
                                    <div class="live-status">
                                        <img src="./image/对勾中.svg" alt="">
                                        直播结束
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="live-content-box">
                                    <div class="img-container">
                                        <img src="./image/直播封面-1254953535796150272.png" alt="">
                                    </div>
                                    <div class="live-title"> 求职技巧之重难点问题剖析与解决 </div>
                                    <div class="live-status">
                                        <img src="./image/对勾中.svg" alt="">
                                        直播结束
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="live-content-box">
                                    <div class="img-container">
                                        <img src="./image/123-1252130152859566080.png" alt="">
                                    </div>
                                    <div class="live-title"> 求职技巧之重难点问题剖析与解决 </div>
                                    <div class="live-status">
                                        <img src="./image/播放.svg" alt="">
                                        07-08 19:30
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="live-content-box">
                                    <div class="img-container">
                                        <img src="./image/数据结构与算法+基础篇+拷贝-1252123020651134976.jpg" alt="">
                                    </div>
                                    <div class="live-title"> 求职技巧之重难点问题剖析与解决 </div>
                                    <div class="live-status">
                                        <img src="./image/对勾中.svg" alt="">
                                        直播结束
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右侧 -->
                <div class="online-right">
                    <!-- 标题 -->
                    <div class="online-right-title">
                        <img src="./image/star.png" alt="">
                        <div>课程榜单</div>
                        <div>以购买、学习相关数据为依据～每日更新</div>
                    </div>
                    <!-- 主体 -->
                    <div class="online-right-main">
                        <img src="./image/bestseller-list.23c00d98.png" alt="">
                        <!--课程  -->
                        <div class="course-box">
                            <div class="course">
                                <div class="course-rank">NO.1</div>
                                <div class="img-box">
                                    <img src="./image/求职成功之道与术_1-1227885610962780160.jpg" alt="">
                                </div>
                                <div class="course-info">
                                    <div class="course-title"> 求职成功之道与术 </div>
                                    <div class="course-price"> ¥800 </div>
                                    <div class="course-study-num"> 652 人报名 </div>
                                </div>
                            </div>
                            <div class="course">
                                <div class="course-rank">NO.1</div>
                                <div class="img-box">
                                    <img src="./image/求职成功之道与术_1-1227885610962780160.jpg" alt="">
                                </div>
                                <div class="course-info">
                                    <div class="course-title"> 求职成功之道与术 </div>
                                    <div class="course-price"> ¥800 </div>
                                    <div class="course-study-num"> 652 人报名 </div>
                                </div>
                            </div>
                            <div class="course">
                                <div class="course-rank">NO.1</div>
                                <div class="img-box">
                                    <img src="./image/求职成功之道与术_1-1227885610962780160.jpg" alt="">
                                </div>
                                <div class="course-info">
                                    <div class="course-title"> 求职成功之道与术 </div>
                                    <div class="course-price"> ¥800 </div>
                                    <div class="course-study-num"> 652 人报名 </div>
                                </div>
                            </div>

                        </div>
                        <!-- 切换按钮 -->
                        <div class="change-box">
                            <button class="change-btn">换一换</button>
                        </div>
                    </div>
                </div>
            </div>


            <!-- 课程：免费课程 -->
            <div>
                <div class="class-list-container">
                    <!-- 课程标题行 -->
                    <div class="class-title-line">
                        <div class="class-title">
                            <img src="./image/free-logo.png" alt="">
                            <span>免费课程</span>

                        </div>
                        <div class="more-btn">
                            <a href="">更多</a>
                            <img src="./image/箭头.svg" alt="">
                        </div>
                    </div>

                    <!-- 课程列表 -->
                    <div class=" class-list-container">
                        <!-- <div class="col-lg-2-4 class-list-item">1</div> -->
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="free">
                                    免费
                                </span>
                            </div>
                        </div>

                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/1备份+14-1630366194873663488.png" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="price">
                                    ￥2999
                                </span>
                            </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="free">
                                    免费
                                </span>
                            </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="free">
                                    免费
                                </span>
                            </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="free">
                                    免费
                                </span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 课程：精品课程 -->
            <div>
                <div class="class-list-container">
                    <!-- 课程标题行 -->
                    <div class="class-title-line">
                        <div class="class-title">
                            <img src="./image/fire.png" alt="">
                            <span>精品课程</span>
                            <img src="./image/vip-free.png" alt="">
                        </div>
                        <div class="more-btn">
                            <a href="">更多</a>
                            <img src="./image/箭头.svg" alt="">
                        </div>
                    </div>

                    <!-- 课程列表 -->
                    <div class=" class-list-container">
                        <!-- <div class="col-lg-2-4 class-list-item">1</div> -->
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="free">
                                    免费
                                </span>
                            </div>
                        </div>

                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="no-free">
                                    ￥2999
                                </span>
                            </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="free">
                                    免费
                                </span>
                            </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="free">
                                    免费
                                </span>
                            </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="free">
                                    免费
                                </span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 课程：限时折扣课程 -->
            <div>
                <div class="class-list-container">
                    <!-- 课程标题行 -->
                    <div class="class-title-line">
                        <div class="class-title">
                            <img src="./image/clock.png" alt="">
                            <span>限时折扣课程</span>
                            <img src="./image/vip-free.png" alt="">
                        </div>
                        <div class="more-btn">
                            <a href="">更多</a>
                            <img src="./image/箭头.svg" alt="">
                        </div>
                    </div>

                    <!-- 课程列表 -->
                    <div class=" class-list-container">
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="price"> ￥89.9 </span>
                                <span class="old-price">￥799</span>
                                <span class="discount-info">限时钜惠</span>
                            </div>
                        </div>

                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="no-free">
                                    ￥2999
                                </span>
                            </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="free">
                                    免费
                                </span>
                            </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="free">
                                    免费
                                </span>
                            </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                            </div>
                            <div class="class-title"> 智慧狐智能棋具操作说明</div>
                            <div class="class-info"> 共 46 节课| 1590 人报名 </div>
                            <div class="class-price">
                                <span class="free">
                                    免费
                                </span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!--  头条精选 -->
            <div>
                <div class="class-list-container">
                    <!-- 课程标题行 -->
                    <div class="class-title-line">
                        <div class="class-title">
                            <img src="./image/king's hat.png" alt="">
                            <span>头条精选</span>

                        </div>
                        <div class="more-btn">
                            <a href="">更多</a>
                            <img src="./image/箭头.svg" alt="">
                        </div>
                    </div>

                    <!-- 课程列表 -->
                    <div class=" class-list-container">
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/稿定设计-2-1894220709022924800.jpg" alt="">
                            </div>
                            <div class="class-title"> AI大模型从入门到实战 | 招生简章 | 创始人全程面授「4周速成」 </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/稿定设计-2-1894220709022924800.jpg" alt="">
                            </div>
                            <div class="class-title"> AI大模型从入门到实战 | 招生简章 | 创始人全程面授「4周速成」 </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/稿定设计-2-1894220709022924800.jpg" alt="">
                            </div>
                            <div class="class-title"> AI大模型从入门到实战 | 招生简章 | 创始人全程面授「4周速成」 </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/稿定设计-2-1894220709022924800.jpg" alt="">
                            </div>
                            <div class="class-title"> AI大模型从入门到实战 | 招生简章 | 创始人全程面授「4周速成」 </div>
                        </div>
                        <div class=" class-list-item">
                            <div class="img-container">
                                <img src="./image/稿定设计-1-1894220134042566656.jpg" alt="">
                            </div>
                            <div class="class-title"> AI大模型从入门到实战 | 招生简章 | 创始人全程面授「4周速成」 </div>
                        </div>

                    </div>

                </div>
            </div>
            
        <div class="footer-container">
            <div class="footer">
                <div class="first-line">友情链接:</div>
                <div class="second-line">
                    <a href="  ">天亮教育</a>
                    <a href="  ">天亮教育</a>
                    <a href="  ">天亮教育</a>
                    <a href="  ">天亮教育</a>
                    <a href="  ">天亮教育</a>

                </div>
                <div class="spacer-line"></div>
                <div class="third-line">Copyright © 2017-2025 石家庄天亮教育科技有限公司 备案号:冀ICP备17020003号</div>
            </div>
        </div>
    </div>
</body>

<!--轮播图script  -->
<script>
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: {
            delay: 3000,          // 切换间隔时间（毫秒）
            disableOnInteraction: false // 用户操作后是否停止自动切换
        },
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })        
</script>
<script src="./js/index.js"></script>

</html>